<template>
  <div class="person">
    姓: <input type="text" v-model="firstName"> <br>
    名: <input type="text" v-model="lastName"> <br>
    全名: <span>{{ fullName }}</span> <br>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
let firstName = ref('小');
let lastName = ref('灿');

// 这么定义的fullName是一个计算属性，且是只读的
let fullName = computed(() => {
  return `${firstName.value}${lastName.value}同学`
})
</script>

<style scoped>
.person {
  background: darksalmon;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>